<template>
  <a-result :status="statusCode" :title="error.statusCode" :sub-title="subTitle">
    <template #extra>
      <a-button type="primary" @click="() => $router.push('/console')">
        {{ $t('layouts.error.back') }}
      </a-button>
    </template>
  </a-result>
</template>
<script lang="ts">
import { NuxtError } from '@nuxt/types'
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component({
  layout: 'error'
})
export default class ErrorLayout extends Vue {
  @Prop()
  private error!: NuxtError

  get subTitle () {
    switch (this.error.statusCode) {
      case 403:
        return this.$t('layouts.error.err403')
      case 404:
        return this.$t('layouts.error.err404')
      case 500:
        return this.$t('layouts.error.err500')
      default:
        return this.error.message
    }
  }

  get statusCode () {
    if ([403, 404, 500].includes(this.error.statusCode as number)) {
      return this.error.statusCode + ''
    }
    return 'warning'
  }
}
</script>
